<template>
	<div class="outer">
		<div class="chart-card">
			<div class="cart-header sensor-header"">
				<slot name="header"/>
			</div>
			<div class="chart-main">
				<slot name="main"/>
			</div>
			<div class="chart-footer">
				<slot name="footer"/>
			</div>
		</div>
	</div>
</template>

<script>
  export default {
    name: 'CommonCardSmall',
    props: {
      name: {
        type: String,
        default: ''
      }
    }
  }
</script>

<style scoped>
	.outer {
		margin-top: 50px;
		display: flex;
		width: 100%;
	}
	.chart-card {
		margin: 0 15px;
		overflow: unset;
		width: 100%;
		border-radius: 3px;
		box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
		background-color: #fff;
	}
	.cart-header {
		float: left;
		display: flex;
		border-radius: 3px;
		width: 86px;
		height: 86px;
		margin: -20px 15px 0;
		box-shadow: 0 12px 20px -10px rgba(0, 188, 212, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(0, 188, 212, 0.2);
	}
	.chart-title {
		display: block;
		width: 100%;
		color: rgba(0, 0, 0, .87);
		font-size: 18px;
		font-family: Roboto;
		padding: 15px 20px;
	}
	.chart-main {
		padding: 10px;
	}
	.chart-footer {
		display: flex;
		border-top: 1px #eeeeee solid;
		margin: 20px 15px;
	}
</style>